import React,{ Component } from 'react'
import ReactDOM from 'react-dom';
import ReactSwipe from 'react-swipe';
import Banner from '../../../static/icon/banner.png'
import './style.less'

export default class Carousel extends Component{
  constructor(){
    super()
    this.state = {
      index: 0
    }
  }
  render(){
    const lunbo = {
      callback: function (index){
        this.setState({
          index: index
        })
      }.bind(this)
    }
    return(
      <div className='carousel-box'>
        <ReactSwipe className="carousel" swipeOptions={lunbo}>
          <div><img src={Banner} alt='' /></div>
          <div><img src={Banner} alt='' /></div>
          <div><img src={Banner} alt='' /></div>
        </ReactSwipe>
        <div className="index-pagination">
          <ul>
            <li className={this.state.index ===  0 ? 'active' : ''}></li>
            <li className={this.state.index ===  1 ? 'active' : ''}></li>
            <li className={this.state.index ===  2 ? 'active' : ''}></li>
          </ul>
        </div>
      </div>
    )
  }
}
